<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>变量分类</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>
    <body>
        <div id='app'>
            <el-tabs v-model='currentTab'>
                <el-tab-pane label="基本信息" name="rbasic">
                    <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                </el-tab-pane>
                <el-tab-pane label="逻辑脚本" name="script">
                    <el-form label-width="100px" label-position='top'>
                        <el-form-item label="脚本内容">
                            <hc-groovy-editor :panel='false' v-model="ruleDef.script" :minlines='12' :maxlines='40'></hc-groovy-editor>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="分支定义" name="branch">
                    <el-table border :data="ruleDef.list" style="width: 100%;margin-bottom: 20px;" row-key="id">
                        <el-table-column label="#" prop="id" width='40px'>
                        </el-table-column>
                        <el-table-column label="分类代码" prop="code">
                            <template slot-scope="scope">
                                <el-input v-model.trim="scope.row.code" placeholder="分类代码" onkeyup="value=$util.tokentrim(value)"
                                    onbeforepaste="clipboardData.setData('text',$util.tokentrim(clipboardData.getData('text')))"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="区间范围">
                            <template slot-scope="scope">
                                <el-input v-if="!scope.row.otherflag" v-model.trim="scope.row.range" placeholder="区间范围"></el-input>
                                <span v-else>
                                    <el-input disabled value='其它情况'></el-input>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="名称/说明" prop="name">
                            <template slot-scope="scope">
                                <el-input v-model.trim="scope.row.name" placeholder="分类名称/说明"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column title="操作">
                            <template slot-scope="scope">
                                <el-button size='mini' plain type="danger" :disabled='scope.row.otherflag==1' @click="deleteRowEvent(scope.$index)">X</el-button>
                                <el-button size='mini' type="primary" @click="insertRowEvent(scope.$index)">干</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="规则测试" name="test">
                    <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                </el-tab-pane>
            </el-tabs>
            <el-form v-if="currentTab != 'test'" >
                <el-form-item label="">
                    <el-button type="primary" @click='handleUpdateRuleEvent'>保存修改</el-button>
                    &nbsp;&nbsp;
                    <el-button plain type="danger" @click='handleDeleteRuleEvent'>删除规则</el-button>
                </el-form-item>
            </el-form>
        </div>

        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
        <link rel="stylesheet" href="/com/hc-groovy-editor.css" />
        <link rel="stylesheet" href="/com/hc-lang-editor.css" />
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import {} from '/com/hc-groovy-editor.js'
            window.$util = $util
            $rest.check$pinfoOrLoad(function() {
                $rest.obtainRuleDefByRpath($util.getUrlArgOrDefault('rpath','xsxdjc/SimpleBranch'), initvm);
            }, 'xsxdjc/Main');

            function initvm(ruleDef) {
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        ruleDef: ruleDef,
                        currentTab:'script',
                    },
                    methods: {
                        handleUpdateRuleEvent: function() {
                            $rest.updateRuleDefInVm(this)
                        },
                        handleDeleteRuleEvent: function() {
                            $rest.deleteRuleDefInVm(this)
                        },
                        deleteRowEvent(row) {
                            vm.$data.ruleDef.list.splice(row, 1);
                        },
                        insertRowEvent(row) {
                            vm.$data.ruleDef.list.splice(row, 0, {
                                id: ++this.ruleDef.rmaxid
                            });
                        },
                    },
                });

            };
        </script>
    </body>

</html>
